<script setup>
  import { useQuasar } from '@teld/q-components';
  import { ref } from 'vue';

  const visible = ref(true);
  const reverse = ref(true);
  const componentColor = ref('#79b264');
  const type = ref('static');
  const handleToggleType = () => {
    type.value = type.value === 'static' ? 'dynamic' : 'static';
  };
  const staticItems = ref([
    {
        title: '新建',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'left',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: '我们可以度过美好时光，也可以虚度光阴，但我希望你活得精彩。我希望你能看到令你惊叹的事物，我希望你体会从未有过的感觉，我希望你遇见具有不同观点的人，我希望你的一生能让自己过得自豪。如果你发现你的生活并非如此，我希望你能有勇气重新来过。 你是独特的，但你必须向统一让步；你是自由的，但你必须向禁忌妥协。因为你渴望亲近群体，渴望他们的接受。你害怕被群体驱逐。因而你是孤独的，你是独特但孤独的心魂。生来如此。生，就是这样，永远都是这样。    ——史铁生《务虚笔记》  '
      },
      {
        title: '已响应',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'right',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: '那一天我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。',

      },
      {
        title: '已处理',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'left',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: 'Most of us compare ourselves with anyone we think is happier — a relative, someone we know a lot, or someone we hardly know. As a result, what we do remember is anything that makes others happy, anything that makes ourselves unhappy, totally forgetting that there is something happy in our own life.  So the best way to destroy happiness is to look at something and focus on even the smallest flaw. It is the smallest flaw that would make us complain. And it is the complaint that leads to us becoming unhappy.  If one chooses to be happy, he will be blessed; if he chooses to be unhappy, he will be cursed. Happiness is just what you think will make you happy.',
      },
      {
        title: '已关闭',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'right',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: '结束了'
      }
  ]);
  const listDataSource = ref([
    {
      title: '我是动态数据源',
      body: '(body内容)This is the first entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timeline.',
      subtitle: '2022-01-01',
      color: 'blue',
      pic: 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
      name: '我是name字段',
      text: '新建',
    },
    {
      title: '我是动态数据源',
      body: '(body内容)This is the first entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timeline.',
      subtitle: '2022-01-01',
      pic: 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
      name: '我是name字段',
      text: '新建',
    },
    {
      title: '我是动态数据源',
      body: '(body内容)This is the first entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timeline.',
      subtitle: '2022-01-01',
      pic: 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
      name: '我是name字段',
      text: '新建',
    },
  ]);
</script>

<template>
  <div class="q-pa-lg">
<div style="display: flex;gap: 10px;">
      <t-button class="tr-button-default" @click="handleToggleType">{{ type }}</t-button>
       <t-button class="tr-button-default" @click="reverse = !reverse">倒叙排序</t-button>
    <t-button class="tr-button-default" @click="visible = !visible">改变visible属性</t-button>
</div>
    <t-timeline
      :reverse='reverse'
      :componentColor="componentColor"
      :itemsDataSourceType="type"
      :staticItems="staticItems"
      :listDataSource="listDataSource"
      :visible="visible"
    >
    </t-timeline>
  </div>
</template>


<style>
      .t-timeline{
    .t-timeline-title {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        display: inline-flex;
        text-transform: none;
      }
      .t-timeline-subtitle {
        font-size: 12px;
      }
      .q-timeline h6{
        font-size: 12px;
        color: rgba(0,0,0,0.32);
        font-weight: bold;
        font-family: 'AlibabaPuHuiTi';
      }
      .t-timeline__entry--icon .t-timeline__dot:after{
       left: 17px;
      }
      .t-timeline-line {
        background: #9b9b9b; /*背景色为浅灰色*/
        width: 1px; /*设置宽高*/
        height: 16px;
        margin-left: 20px;
      }
      .t-timeline-titletext{
        margin-left: 10px;
        font-size: 12px;
      }
      .t-timeline-titleavator {
        margin-left: 10px;
      }
      /* .t-timeline--dense--right .t-timeline__entry--icon .t-timeline__dot{
        left: 8px;
      } */
    .t-icon:before, .t-icon:after{
        width: 100%;
        height: 100%;
        display: flex!important;
        align-items: center;
        justify-content: center;
        padding-top: 2px;
        font-size: 20px;
    }
    .q-timeline__dot:before{
      width: 14px;
      height: 14px;
      left: 1px;
      border: 0px solid transparent;
    }
  }
  .q-timeline{
    outline: 0!important;
  }
  .q-timeline__title{
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
  }
  .t-timeline-body{
    font-size: 14px;
  }

</style>
